<!-- 组件 头部搜索 -->
<template>
  <div class="HeaderSearch">
    <van-row class="header">
      <van-col span="5" class="header_icon">
      <router-link to="/me">
        <img :src="avatar" alt="" v-if="islogin">
        <img src="@/assets/avatar/00fb2f5b2c9a39a8012034f76e8c48.jpg" alt="" v-else>
      </router-link>
      </van-col>
      <van-col span="18">
        <van-search
          class="header_search"
          v-model="search"
          shape="round"
          placeholder="请输入搜索关键字"
          maxlength="50"
          @search="onSearchHeader"
        ></van-search>
      </van-col>
      <van-col>
        <van-button round  type="info" size="small" class="header_search_Btn" @click="onSearchHeader">搜索</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "HeaderSearch",
  data() {
    return {
      search: "", //搜索输入框的值
    };
  },
  computed: {
    ...mapState(["islogin","avatar"]),
  },
  watch: {
    search() { // 监听空值触发方法,给父组件传值
      if (this.search === "") {
        this.onSearchHeader();
      }
    },
  },
  methods: {
    onSearchHeader() { //传值给父组件,对应的方法
      this.$emit("onSearch", this.search);
    },
  },
};
</script>

<style lang="scss" scoped>
.HeaderSearch {
  .header {
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 10;
    background-color: $base-color;
    .header_icon {
      overflow: hidden;
      img {
        width: 45px;
        display: inline-block;
        margin: 4px 0 0 17px;
        border-radius: 50%;
      }
    }
    .header_search {
      padding: 10px 0 10px 0;
      background-color: $base-color;
    }
    .header_search_Btn {
      position: absolute;
      top: 12px;
      right: 18px;
      padding: 0 15px;
    }
  }
  .van-button--small{
    height: 30px;
    font-size: 14px;
    font-weight: bold;
  }
}
</style>
